<template>
    <div>
    <el-calendar v-model="localValue">
        <template
                #dateCell="{date, data}">
            <div class="g-width100 g-height100" :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(2).join('-') }}
                <template v-if="userClockThreeMonth && (date.getTime() < userClockThreeMonth.now.now)">
                    <br/>
                    <el-tag v-if="isNormal(data.day,data.type)" type="success" @click.stop="userClockDetail(data.day,data.type)">正常</el-tag>
                    <el-tag v-else type="danger" @click.stop="userClockDetail(data.day,data.type)">存在异常</el-tag>
                </template>

            </div>
        </template>
    </el-calendar>

        <el-dialog
                :title="dialog.title"
                :visible.sync="dialog.dialogVisible"
                >
            <el-table
                    :data="dialog.tableData"
                    border
                    stripe
                    size="mini"
                    class="g-width100">
                <el-table-column
                        prop="group.name"
                        label="考勤组">
                </el-table-column>
                <el-table-column
                        prop="classe.name"
                        label="班次">
                    <template v-slot:default="scope">
                        {{scope.row.classe.name}} ({{scope.row.classe.startTime}} - {{scope.row.classe.endTime}})
                    </template>
                </el-table-column>

                <el-table-column
                        prop="userClock.onClockAtTxt"
                        label="上班打卡时间">
                    <template v-slot:default="scope">
                        <el-tag v-if="!scope.row.userClock || !scope.row.userClock.onClockAt" type="danger">未打卡</el-tag>
                        <template v-else>
                            {{scope.row.userClock.onClockAtTxt}}
                            <el-tag v-if="scope.row.userClock.isOnClockLate == true" type="danger">迟到{{scope.row.userClock.onClockLateTime}}分</el-tag>
                            <el-tag v-else type="success">正常</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="userClock.onClockTypeDictName"
                        label="上班打卡方式">
                </el-table-column>
                <el-table-column
                        prop="userClock.offClockAtTxt"
                        label="下班打卡时间">
                    <template v-slot:default="scope">
                        <el-tag v-if="!scope.row.userClock  || !scope.row.userClock.offClockAt" type="danger">未打卡</el-tag>
                        <template v-else>
                            {{scope.row.userClock.offClockAtTxt}}
                            <el-tag v-if="scope.row.userClock.isOffClockLeaveEarly == true" type="danger">早退{{scope.row.userClock.offClockLeaveEarlyTime}}分</el-tag>
                            <el-tag v-else type="success">正常</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="userClock.offClockTypeDictName"
                        label="下班打卡方式">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialog.dialogVisible = false">取 消</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MyAttend",
        data() {
            return {
                dialog: {
                    title: '打卡详情',
                    dialogVisible: false,
                    tableData: null
                },

                localValue: new Date(),
                selectData: null,
                userClockThreeMonth: null
            }
        },
        computed:{

        },
        mounted(){
            this.initSelectData()
          this.getUserClockThreeMonth(this.localValue.getTime())
        },
        methods:{
            initSelectData(){
                this.axios.get(this.$baseURL.attend +  '/attend/groupclasserel/groupAndClassesList').then(res => {
                    this.selectData = res.data
                })
            },
            getUserClockThreeMonth(current){
                this.axios.get(this.$baseURL.attend +  '/attend/userclock/threeMonth',{params:{current:current}})
                    .then(res => {
                        this.userClockThreeMonth = res.data
                    })
            },
            isNormal(day,type){
                if (!this.userClockThreeMonth) {
                    return false
                }
                switch (type) {
                    case 'prev-month': {
                        return this.hasError(this.userClockThreeMonth.preMonth,day)
                    }
                    case 'current-month': {
                        return this.hasError(this.userClockThreeMonth.currentMonth,day)
                    }
                    case 'next-month': {
                        return this.hasError(this.userClockThreeMonth.nextMonth,day)
                    }
                }
                return true
            },
            hasError(userClockDates,day){
                for (let k = 0; k < userClockDates.length; k++) {
                    let item = userClockDates[k]
                    if(item.classeDateTxt == day){
                        return !item.isHasError
                    }
                }
                return false
            },
            getClockDetail(userClockDates,day) {
                for (let k = 0; k < userClockDates.length; k++) {
                    let item = userClockDates[k]
                    if(item.classeDateTxt == day){
                        if(item.userClockDateClasses){
                            let r = []
                            for (let i = 0; i < item.userClockDateClasses.length; i++) {
                                let iItem = item.userClockDateClasses[i]
                                let userClock = null
                                for (let j = 0; j < item.userClocks.length; j++) {
                                    if(iItem.groupId == item.userClocks[j].groupId && iItem.classeId == item.userClocks[j].classeId){
                                        userClock = item.userClocks[j]
                                        break
                                    }
                                }
                                console.log(userClock)
                                r.push({
                                    group: iItem.group,
                                    classe: iItem.classe,
                                    userClock: userClock
                                })
                            }
                            return r
                        }
                    }
                }
                return []
            },
            userClockDetail (day,type){
                this.dialog.dialogVisible = true
                this.dialog.title = day
                let tableData = []

                switch (type) {
                    case 'prev-month': {
                        tableData = this.getClockDetail(this.userClockThreeMonth.preMonth,day)
                        break
                    }
                    case 'current-month': {
                        tableData = this.getClockDetail(this.userClockThreeMonth.currentMonth,day)
                        break
                    }
                    case 'next-month': {
                        tableData = this.getClockDetail(this.userClockThreeMonth.nextMonth,day)
                        break
                    }
                }
                if(tableData.length == 0 && this.selectData != null){
                    this.selectData.forEach(item =>{
                        let classes = item.classes
                        classes.forEach(cItem => {
                            tableData.push({
                                group: item.group,
                                classe: cItem,
                                userClock: null
                            })
                        })
                    })

                }
                this.dialog.tableData = tableData
            },
        },
        watch:{
            localValue (val){
                this.getUserClockThreeMonth(val.getTime())
            }
        }
    }
</script>

<style scoped>
    .is-selected {
        color: #1989FA;
    }
</style>